<template>
	<div class="compSider">
		<transition name="mask">
			<div v-if="mask" v-show="open" class="mask" @click.self="onclose" />
		</transition>
		<transition name="panel">
			<sPanel v-show="open" class="inline trans panel" :title="title" :padding="padding" :style="{ width: width_ }">
				<slot />
			</sPanel>
		</transition>
	</div>
</template>

<script>
	export default {
		props: {
			open: {
				type: Boolean,
				default: false
			},

			mask: {
				type: Boolean,
				default: true,
			},

			title: {
				type: [Number, String],
				default: ''
			},

			padding: {
				type: [Number, String],
				default: undefined
			},

			width: {
				type: [Number, String],
				default: ''
			},

			onclose: {
				type: Function,
				default() { }
			},
		},
		data() {
			return {
				openBox: false
			};
		},
		computed: {
			width_() {
				let width = String(this.width);

				if(/^[1-9]\d*(\.\d+)?$/.test(width)) {
					return `${width}px`;
				}
				else {
					return this.width;
				}
			}
		},
		methods: {
			enter() {
				this.openBox = true;
			},
			leave() {
				this.openBox = false;
			}
		}
	};
</script>

<style scoped>
	@keyframes show {
		0% {
			opacity: 0;
			right: -100%;
		}
		100% {
			opacity: 1;
			right: 0px;
		}
	}
	@keyframes hide {
		0% {
			opacity: 1;
			right: 0px;
		}
		100% {
			opacity: 0;
			right: -100%;
		}
	}
	.panel-enter-active {
		animation: show 0.4s;
	}
	.panel-leave-active {
		animation: hide 0.4s;
	}
	.panel-enter, .panel-leave-to {
		opacity: 0;
	}

	.mask-enter-active, .mask-leave-active {
		transition: opacity .5s;
	}
	.mask-enter, .mask-leave-to {
		opacity: 0;
	}

	.mask {
		position: fixed;

		top: 3.4rem;
		bottom: 0rem;
		left: 0rem;
		right: 0rem;

		font-size: 0rem;

		background: rgba(128, 128, 128, 0.4);

		cursor: pointer;

		z-index: 3;
	}
	.panel {
		position: fixed;

		top: 3.4rem;
		right: 0rem;

		height: calc(100% - 3.4rem);

		background: #36434e;

		box-shadow: -2px 2px 7px -2px rgba(0, 0, 0, 0.4);

		font-size: inherit;
		line-height: inherit;

		z-index: 4;
	}
</style>